再谈前端项目的组件化

再谈前端项目的组件化

之前详细聊过的前端项目的组件化，可以参考 组件化 与 私有 npm 仓库，今天来更进一步的说说前端项目的组件化。

1. 之前的组件化

目录结构：

-project1     # 项目1
-project2     # 项目2
-component1   # 组件1
-component2   # 组件2

project1 的 package.json：

{
  "dependencies": {
    "@yourCompany/component1": "^0.0.1",
    "@yourCompany/component2": "^0.0.1"
  }
}

在代码中使用：

import component1 from '@yourCompany/component1';

2. 之前的组件化方式存在的问题

1. 更新组件比较麻烦，特别是对于一些与业务耦合比较深的组件，频繁更新会比较头疼
2. 组件太多的时候，管理起来就感觉比较累，因为每个组件都是一个单独的项目，都有一套独立的构建环境
3. 对于有些代码量小的组件，做一个单独的项目，实在有点大才小用

3. 另外的项目组件化方式

针对上面讲到的问题，另一种方式可以很好的解决：

目录结构：

-project1     # 项目1
-project2     # 项目2
-components   # 组件集合项目

components 组件集合项目的目录结构：

- src/             # 源代码目录
  - component1     # 组件1
  - component2     # 组件2
  - component3     # 组件3
  - ...

- package.json
- README.md
- CHANGELOG.md
- .eslintrc.js
- .stylelintrc.js
- .prettierrc.js
- ...

把 components 目录软链接 project1 目录下：

（注意： project1 的 .gitignore 需加上 /components）

# 以下是 linux 命令，windows 类似
cd project1
ln -s ../components ./

project1 项目的目录结构：

- src/             # 源代码目录
- components/      # 组件项目目录（软链接）

- package.json
- README.md
- CHANGELOG.md
- .eslintrc.js
- .stylelintrc.js
- .prettierrc.js
- ...

在代码中使用：

import component1 from 'relative/path/to/components/src/component1';

4. 两种方式的选择

上面的两种方式各有各的优势，可以配合一起使用。

大的、不常更新的组件可以使用 npm 包的方式，小的、常更新的可以使用软链接项目的方式。

后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）